<template>
  <div>
    <headertitle></headertitle>
    <div class="body" id="body1">
      <div id="Amm" class="clear">
        <div id="Amml">
          <div>
            <img src="../../public/images/bigorange.jpg" alt />
          </div>
          <ul>
            <p>《</p>
            <li>
              <img src="../../public/images/bigorange.jpg" alt />
            </li>
            <li>
              <img src="../../public/images/bigorange.jpg" alt />
            </li>
            <li>
              <img src="../../public/images/bigorange.jpg" alt />
            </li>
            <li>
              <img src="../../public/images/bigorange.jpg" alt />
            </li>
            <p>></p>
          </ul>
        </div>
        <div id="Ammm">
          <h2>男士短衬衫</h2>
          <p>海澜之家把啦啦啦啦巴啦啦拉巴啦啦拉吧啊啦啦啦巴啦啦拉巴啦啦拉巴啦啦拉海澜之家把啦啦啦啦巴啦啦拉巴啦啦拉吧啊啦啦啦巴啦啦拉。</p>
          <ul>
            <li>尺码:</li>
            <li>170</li>
            <li>175</li>
            <li>180</li>
            <li>颜色:</li>
            <li>红</li>
            <li>绿</li>
            <li>蓝</li>
          </ul>
          <div class="Ammm1">
            <div>
              <strong>现价：￥200</strong>
              <span>原价：￥40</span>
              <em>已有381人买了该宝贝</em>
            </div>
            <ol>
              <li>
                <em>数量:</em>
                <span>-</span>
                <span>1</span>
                <span>+</span>
              </li>
              <li>加入购物车</li>
              <li>立即购买</li>
            </ol>
          </div>
          <div class="Ammm2">
            <span>
              <i class="iconfont icon-shoucang"></i>收藏此品
            </span>
            <span>
              分享到
              <i class="iconfont icon-QQkongjian"></i>
              <i class="iconfont icon-qq"></i>
              <i class="iconfont icon-weibo"></i>
              <i class="iconfont icon-pengyouquan"></i>
            </span>
          </div>
        </div>
        <div id="Ammr">
          <div>点击进入商家</div>
          <div>
            <i class="iconfont icon-qq"></i> QQ客服1
          </div>
          <div>
            <i class="iconfont icon-qq"></i> QQ客服2
          </div>
        </div>
      </div>
      <div class="Att">
        <p>
          <span class="active2">商品详情</span>
          <span>商品评价</span>
          <span>成交记录</span>
        </p>
        <div class="Att1 Atttt">
          <h3>男士短衬衫</h3>
          <div>海拉把指甲巴拉巴拉巴拉给</div>
          <div>海拉把指甲巴拉巴拉巴拉给海澜之家吧</div>
          <div>海拉把指甲巴拉巴拉巴拉给海澜之家吧巴拉巴拉吧</div>
          <img src="../../public/images/hamigua.png" alt />
        </div>
        <div class="Att1 Atttt">
          <h3>男士短衬衫</h3>
          <div>海拉把指甲巴拉巴拉巴拉给</div>
          <div>海拉把指甲巴拉巴拉巴拉给海澜之家吧</div>
          <div>海拉把指甲巴拉巴拉巴拉给海澜之家吧巴拉巴拉吧</div>
          <img src="../../public/images/hamigua.png" alt />
        </div>
      </div>
      <div class="Att Att1t">
        <p>
          <span class="active2">评价</span>
        </p>
        <div class="Att1 clear">
          <div class="Att1l">
            <img src="../../public/images/bigorange.jpg" alt />
            <span>张**</span>
          </div>
          <div class="Att1r">
            <div>
              2016-10-27
              <i class="iconfont icon-shoucang"></i>
              <i class="iconfont icon-shoucang"></i>
              <i class="iconfont icon-shoucang"></i>
              <i class="iconfont icon-shoucang"></i>
              <i class="iconfont icon-shoucang"></i>
            </div>
            <div>好吃好吃真好吃真的拆机好吃呢啊哈哈哈哈哈啊哈哈哈哈是客观要来一个么</div>
            <ul>
              <li>
                <img src="../../public/images/bigorange.jpg" alt />
              </li>
              <li>
                <img src="../../public/images/bigorange.jpg" alt />
              </li>
              <li>
                <img src="../../public/images/bigorange.jpg" alt />
              </li>
              <li>
                <img src="../../public/images/bigorange.jpg" alt />
              </li>
            </ul>
          </div>
        </div>
        <div class="Att1 clear">
          <div class="Att1l">
            <img src="../../public/images/bigorange.jpg" alt />
            <span>张**</span>
          </div>
          <div class="Att1r">
            <div>
              2016-10-27
              <i class="iconfont icon-shoucang"></i>
              <i class="iconfont icon-shoucang"></i>
              <i class="iconfont icon-shoucang"></i>
              <i class="iconfont icon-shoucang"></i>
              <i class="iconfont icon-shoucang"></i>
            </div>
            <div>好吃好吃真好吃真的拆机好吃呢啊哈哈哈哈哈啊哈哈哈哈是客观要来一个么</div>
            <ul>
              <li>
                <img src="../../public/images/bigorange.jpg" alt />
              </li>
              <li>
                <img src="../../public/images/bigorange.jpg" alt />
              </li>
              <li>
                <img src="../../public/images/bigorange.jpg" alt />
              </li>
              <li>
                <img src="../../public/images/bigorange.jpg" alt />
              </li>
            </ul>
          </div>
        </div>
        <div class="Att1 clear">
          <div class="Att1l">
            <img src="../../public/images/bigorange.jpg" alt />
            <span>张**</span>
          </div>
          <div class="Att1r">
            <div>
              2016-10-27
              <i class="iconfont icon-shoucang"></i>
              <i class="iconfont icon-shoucang"></i>
              <i class="iconfont icon-shoucang"></i>
              <i class="iconfont icon-shoucang"></i>
              <i class="iconfont icon-shoucang"></i>
            </div>
            <div>好吃好吃真好吃真的拆机好吃呢啊哈哈哈哈哈啊哈哈哈哈是客观要来一个么</div>
            <ul>
              <li>
                <img src="../../public/images/bigorange.jpg" alt />
              </li>
              <li>
                <img src="../../public/images/bigorange.jpg" alt />
              </li>
              <li>
                <img src="../../public/images/bigorange.jpg" alt />
              </li>
              <li>
                <img src="../../public/images/bigorange.jpg" alt />
              </li>
            </ul>
          </div>
        </div>
        <div class="Att1 clear">
          <div class="Att1l">
            <img src="../../public/images/bigorange.jpg" alt />
            <span>张**</span>
          </div>
          <div class="Att1r">
            <div>
              2016-10-27
              <i class="iconfont icon-shoucang"></i>
              <i class="iconfont icon-shoucang"></i>
              <i class="iconfont icon-shoucang"></i>
              <i class="iconfont icon-shoucang"></i>
              <i class="iconfont icon-shoucang"></i>
            </div>
            <div>好吃好吃真好吃真的拆机好吃呢啊哈哈哈哈哈啊哈哈哈哈是客观要来一个么</div>
            <ul>
              <li>
                <img src="../../public/images/bigorange.jpg" alt />
              </li>
              <li>
                <img src="../../public/images/bigorange.jpg" alt />
              </li>
              <li>
                <img src="../../public/images/bigorange.jpg" alt />
              </li>
              <li>
                <img src="../../public/images/bigorange.jpg" alt />
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <footertitle></footertitle>
  </div>
</template>

<script>
import headertitle from "../components1/headertitle.vue";
import footertitle from "../components1/footertitle.vue";
export default {
  components: { headertitle, footertitle }
};
</script>
<style>
/* .body {
  background: yellow;
} */
#body1 #Amm {
  width: 70%;
  background: #fff;
  border: 1px solid #d3d3d3;
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 20px;
}

#body1 #Amml {
  width: 30%;
  height: 400px;
  float: left;
  margin-right: 20px;
}

#body1 #Amml div {
  width: 100%;
  height: 80%;
}

#body1 #Amml div img {
  width: 100%;
  height: 100%;
}

#body1 #Amml ul {
  width: 100%;
  height: 18%;
  padding-top: 5%;
  background: #f2f2f2;
}

#body1 #Amml ul li {
  width: 18%;
  height: 80%;
  float: left;
  margin-right: 2.5%;
}

#body1 #Amml ul p {
  width: 9%;
  height: 100%;
  float: left;
}

#body1 #Amml ul li img {
  width: 100%;
  height: 100%;
}

#body1 #Ammm {
  width: 48%;
  float: left;
  position: relative;
}

#body1 #Ammm h2 {
  font-size: 20px;
  color: #008de1;
  margin-bottom: 10px;
}

#body1 #Ammm p {
  font: 14px/21px "simhei";
  padding-bottom: 10px;
  border-bottom: 1px solid #d3d3d3;
}

#body1 #Ammm ul {
  width: 50%;
  height: 75px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
  margin: 20px;
  margin-left: 0px;
  font-size: 13px;
}

#body1 #Ammm ul li {
  width: 23%;
  height: 35%;
  border: 1px solid #d3d3d3;
  padding-top: 3%;
  padding-left: 3%;
}
#body1 #Ammm ul li:hover {
  color: #fff;
  background: #ec6a17;
}

#body1 #Ammm ul li:nth-last-of-type(4n) {
  border: none;
}

#body1 #Ammm .Ammm1 {
  border: 1px solid #d3d3d3;
  padding: 10px;
}

#body1 #Ammm .Ammm1 div {
  margin-bottom: 26px;
}

#body1 #Ammm .Ammm1 div strong {
  font-size: 15px;
  color: #ed4242;
  margin-right: 2%;
}

#body1 #Ammm .Ammm1 div span {
  font-size: 13px;
  text-decoration-line: line-through;
  margin-right: 6%;
}

#body1 #Ammm .Ammm1 div em {
  font-size: 13px;
  color: #999999;
}

#body1 #Ammm .Ammm1 ol {
  width: 86%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 22px;
}

#body1 #Ammm .Ammm1 ol li {
  font-size: 15px;
  width: 29%;
}

#body1 #Ammm .Ammm1 ol li:nth-last-of-type(2),
#body1 #Ammm .Ammm1 ol li:nth-of-type(3) {
  font: 15px/30px "simhei";
  background: #ffac77;
  color: #fff;
  border-radius: 6px;
  text-align: center;
}

#body1 #Ammm .Ammm1 ol li:nth-last-of-type(1) {
  background: #ec6a17;
}

#body1 #Ammm .Ammm1 ol li:first-of-type {
  float: left;
  width: 35%;
}

#body1 #Ammm .Ammm1 ol li span {
  display: inline-block;
  font-size: 13px;
  width: 23%;
  border: 1px solid #d3d3d3;
  text-align: center;
}

#body1 #Ammm .Ammm1 ol li span:nth-last-of-type(2n-1) {
  width: 12%;
  background: #f2f2f2;
}

#body1 #Ammm .Ammm2 {
  width: 100%;
  margin-top: 25px;
}

#body1 #Ammm .Ammm2 span:first-of-type {
  margin-right: 10%;
}

#body1 #Ammm .Ammm2 span i {
  margin-right: 2%;
}

#body1 #Ammm .Ammm2 span:last-of-type i:nth-of-type(1) {
  color: #eecf3d;
}

#body1 #Ammm .Ammm2 span:last-of-type i:nth-of-type(2) {
  color: #45aaf2;
}

#body1 #Ammm .Ammm2 span:last-of-type i:nth-of-type(3) {
  color: #df4d69;
}

#body1 #Ammm .Ammm2 span:last-of-type i:nth-of-type(4) {
  color: #2e9e3b;
}

#body1 #Ammr {
  width: 14%;
  margin-left: 4%;
  float: left;
}

#body1 #Ammr div {
  background: #ec6a17;
  font: 14px/26px "simhei";
  text-align: center;
  color: #fff;
  border-radius: 6px;
  margin-bottom: 20px;
}

#body1 #Ammr div:first-child {
  background: #45aaf2;
  margin-bottom: 30px;
  margin-top: 10px;
}
#body1 .Att {
  width: 70%;
  height:730px;
  margin-left: 15%;
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid #d3d3d3;
}

#body1 .Att p {
  width: 100%;
  height: 45px;
  background: #f8f8f8;
  border: 1px solid #d3d3d3;
  margin-bottom: 30px;
}

#body1 .Att p span {
  display: inline-block;
  font: 15px/45px "simhei";
  text-align: center;
  width: 10%;
  border-right: 1px solid #d3d3d3;
  margin-right: -5px;
}

#body1 .Att .active2 {
  border-top: 2px solid #008de1;
  border-bottom: none;
  color: #008de1;
  background: #fff;
}

#body1 .Att .td {
  color: #ed4242;
}

#body1 .Att .Att1 {
  margin: 0 30px 30px;
  border-bottom: 1px solid #d3d3d3;
}

#body1 .Att .Att1 h3 {
  font-size: 16px;
  color: #ec6a17;
}

#body1 .Att .Att1 div {
  font: 14px/30px "simhei";
}

#body1 .Att .Att1 img {
  width: 100%;
  /* height:100px; */
  }
  #body1 .Atttt img{
    height:200px;
  }

#body1 .Att .Att1 .Att1l {
  width: 10%;
  float: left;
  margin-right: 2%;
}

#body1 .Att .Att1 .Att1l img {
  width: 100%;
}

#body1 .Att .Att1 .Att1l span {
  margin-left: 20%;
}

#body1 .Att .Att1 .Att1r {
  width: 80%;
  float: left;
  padding-bottom: 20px;
}
#body1 .Att .Att1 .Att1r ul {
  width: 100%;
}
#body1 .Att .Att1 .Att1r li {
  width: 8%;
  float: left;
  margin-right: 1%;
  border: 1px solid #d3d3d3;
}
</style>
